import React, { Component } from 'react'
import { connect } from 'dva';
import moment from 'moment';
import { Form, Input, Modal } from 'antd';
import { SearchRow, SearchCol, SearchButton } from '@/styled/form';
import { DICT } from '../enum';
import { DropDownSelectObj } from '@/components/DropDownSelect/index';
import Link from 'umi/link';

import View from '../view'

interface Props {
  current: number,
  form: any,
  dispatch?: Function,
  initCurrent: Function,
  dict?: Object,
  new: boolean,
  cond?: any
}

const FormItem = Form.Item;

@connect(({ position_xl }) => ({
  dict: position_xl.dict || {},
  cond: position_xl.cond || {}
}))
class Search extends Component<Props, any> {

  state = {
    show: false
  }

  componentDidMount() {
    const { dispatch } = this.props;

    dispatch({
      type: 'position_xl/queryDict',
      payload: {
        keyList: DICT
      }
    }).then(() => {
      const { cond, form } = this.props;
      const { pageNum, pageSize, ...searchParams } = cond;
      form.setFieldsValue(searchParams);
    });
  }

  search = e => {
    e.preventDefault();
    const { dispatch } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!!values.createTime) {
        values.createTimeStart = moment(values.createTime[0]._d).format("YYYY-MM-DD");
        values.createTimeEnd = moment(values.createTime[1]._d).format("YYYY-MM-DD")
      }

      delete values.createTime;
      
      if (!err) {
        dispatch({
          type: 'position_xl/updateCond',
          payload: {
            ...values
          }
        });
        this.props.initCurrent()
      }
    });
  };

  private handleChange = (type: string, value: number | string) => {
    const { cond = {}, dispatch } = this.props;
    cond[type] = value;

    dispatch({
      type: 'position_xl/updateCond',
      payload: {
        ...cond,
      },
    })
  }

  handleViewShow = () => {
    this.setState({
      show: true
    })
  }

  handleViewClose = () => {
    this.setState({
      show: false
    })
  }

  render() {
    const { form, dict } = this.props;
    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    };

    dict['position_xl.enable'] = {
      '0': '否',
      '1': '是'
    }

    return (
      <Form onSubmit={this.search}>
        <SearchRow>
          <SearchCol key={0} span={4}>
            <FormItem
              label="巡逻点名称"
              {...formItemLayout}
            >
              {getFieldDecorator('name', {
                rules: [{ message: '输入名称' }],
              })(
                <Input placeholder="请输入名称" />
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={1} span={4}>
            <FormItem
              label="是否启用"
              {...formItemLayout}
            >
              {getFieldDecorator('enable')(
                DropDownSelectObj({
                  dict, type: 'position_xl.enable',
                  onChange: (v: any) => this.handleChange('enable', +v)
                })
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={3} span={16}>
            <SearchRow type="flex" justify="end">
              <SearchButton htmlType="submit" icon="search">搜索</SearchButton>
              <SearchButton onClick={(e) => {
                this.props.form.resetFields();
                this.search(e)
              }} style={{ 'marginLeft': '15px' }}  icon="redo">重置</SearchButton>
              <SearchButton icon="environment" style={{ 'marginLeft': '15px' }} onClick={this.handleViewShow}>视图查看</SearchButton>
              <Link to='/data/position/new'><SearchButton icon='plus' type="primary">新增</SearchButton></Link>
            </SearchRow>
          </SearchCol>
        </SearchRow>
        <Modal
          title="视图查看"
          visible={this.state.show}
          onCancel={this.handleViewClose}
          footer={null}
          width={850}
        >
          <View />
        </Modal>
      </Form>
    );
  }
}

const SearchS = Form.create<Props>()(Search);
export default SearchS;
